<template>
  <div class="jobExamine">
    <Card>
      <Divider>任务大厅</Divider>
      <div style="text-align:center">
        <Table :data="jobListData" :columns="jobListColumns" stripe @on-row-click="openJobInt"></Table>
        <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
      </div>
      <Modal
        v-model="show"
        title="任务信息"
        ok-text="审核通过"
        @on-ok="ok">
        <Form :model="jobData" :label-width="85">
          <FormItem label="任务名称">
            <Input v-model="jobData.jobName" placeholder="任务名称" disabled></Input>
          </FormItem>
          <FormItem label="任务简介">
            <Input v-model="jobData.jobDescribe" placeholder="任务简介" disabled></Input>
          </FormItem>
          <FormItem label="任务时间">
            <Input v-model="jobData.jobTime" placeholder="任务时间" disabled></Input>
          </FormItem>
          <FormItem label="任务金额">
            <Input v-model="jobData.gold" placeholder="任务金额" disabled></Input>
          </FormItem>
          <FormItem label="任务状态">
            <Input v-model="jobData.jobState" placeholder="任务状态" disabled></Input>
          </FormItem>

          <FormItem>
            <Button @click="back">打回任务</Button>
          </FormItem>

        </Form>
      </Modal>
    </Card>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "jobExamine",
    data() {
      return {
        total: 0,
        show:false,//
        jobListForm: {
          pageNumber:1,
          pageSize:10,
          jobId:'',
          startTime:null,
          endTime:null,
          jobName: '',
          jobDescribe: '',
          jobTime: null,
          jobState: '0',
          gold: ''
        },
        jobData: {},
        jobListData: [],
        jobListColumns: [
          {
            title: '任务名称',
            key: 'jobName'
          },
          {
            title: '任务简介',
            key: 'jobDescribe'
          },
          {
            title: '任务时间',
            key: 'jobTime'
          },
          {
            title: '任务金额',
            key: 'gold'
          },
        ]
      }
    },
    methods:{
      ok () {
        this.jobData.jobState = '1'
        // this.jobData.createTime = new Date(this.jobData.createTime).toLocaleDateString()
        axios.get('http://localhost:8888/jobController/changeJobState',{params: this.jobData}).then(res =>{
          if (res){
            this.$Message.info('任务审核通过');
            this.getJobData()
          }else{
            this.$Message.error('任务审核通过异常');
          }
        })
      },
      back () {
        this.jobData.jobState = '4'
        // this.jobData.createTime = new Date(this.jobData.createTime).toLocaleDateString()
        axios.get('http://localhost:8888/jobController/changeJobState',{params: this.jobData}).then(res =>{
          if (res){
            this.$Message.info('任务已打回');
            this.getJobData()
          }else{
            this.$Message.error('任务审核打回异常');
          }
          this.show = false
        })
      },
      openJobInt(v){
        this.show=true;
        this.jobData = v
        console.log(this.jobData)
      },
      initJobListData(){
        this.jobListData= [{
            jobName: ' ',
            jobDescribe: '',
            jobTime: null,
            jobState: '',
            gold: ''
        }]
      },
      getJobData(){
        axios.get('http://localhost:8888/jobController/queryAll',{params: this.jobListForm}).then(res =>{
          this.jobListData = res.data.list
          this.total = res.data.total
        })
      },
      changePage(v){
        this.jobListForm.pageNumber = v
        this.getJobData()
      },
    },
    mounted() {
      this.initJobListData()
      this.getJobData()
    }
  }
</script>

<style scoped>
  .jobExamine {
    margin: 20px 0 0 20px
  }
</style>
